import { useRef, useState } from "react";
import { IRefPhaserGame, PhaserGame } from "./PhaserGame";
import { MainMenu } from "./game/scenes/MainMenu";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
function App() {
    // The sprite can only be moved in the MainMenu Scene
    const [canMoveSprite, setCanMoveSprite] = useState(true);

    //  References to the PhaserGame component (game and scene are exposed)
    const phaserRef = useRef<IRefPhaserGame | null>(null);
    const [spritePosition, setSpritePosition] = useState({ x: 0, y: 0 });

    const changeScene = () => {
        if (phaserRef.current) {
            const scene = phaserRef.current.scene as MainMenu;

            if (scene) {
                scene.changeScene();
            }
        }
    };

    const moveSprite = () => {
        if (phaserRef.current) {
            const scene = phaserRef.current.scene as MainMenu;

            if (scene && scene.scene.key === "MainMenu") {
                // Get the update logo position
                scene.moveLogo(({ x, y }) => {
                    setSpritePosition({ x, y });
                });
            }
        }
    };

    const addSprite = () => {
        if (phaserRef.current) {
            const scene = phaserRef.current.scene;

            if (scene) {
                // Add more stars
                const x = Phaser.Math.Between(64, scene.scale.width - 64);
                const y = Phaser.Math.Between(64, scene.scale.height - 64);

                //  `add.sprite` is a Phaser GameObjectFactory method and it returns a Sprite Game Object instance
                const star = scene.add.sprite(x, y, "star");

                //  ... which you can then act upon. Here we create a Phaser Tween to fade the star sprite in and out.
                //  You could, of course, do this from within the Phaser Scene code, but this is just an example
                //  showing that Phaser objects and systems can be acted upon from outside of Phaser itself.
                scene.add.tween({
                    targets: star,
                    duration: 500 + Math.random() * 1000,
                    alpha: 0,
                    yoyo: true,
                    repeat: -1,
                });
            }
        }
    };

    // Event emitted from the PhaserGame component
    const currentScene = (scene: Phaser.Scene) => {
        setCanMoveSprite(scene.scene.key !== "MainMenu");
    };

    return (
        <div id="app">
            <Allotment>
                <Allotment.Pane minSize={120} preferredSize={220}>
                    <div className="panel left-panel">
                        <h3>左侧导航</h3>
                        <div className="panel-content">
                            <p>导航内容区域</p>
                        </div>
                    </div>
                </Allotment.Pane>

                {/* 中间面板 - 垂直分割 */}
                <Allotment.Pane minSize={400}>
                    <Allotment vertical>
                        <Allotment.Pane minSize={50} maxSize={50}>
                            <div className="panel bottom-middle-panel">
                                <h3>中间下部</h3>
                            </div>
                        </Allotment.Pane>
                        <Allotment.Pane minSize={150} preferredSize={650}>
                            <div className="panel top-middle-panel">
                                <PhaserGame
                                    ref={phaserRef}
                                    currentActiveScene={currentScene}
                                />
                            </div>
                        </Allotment.Pane>
                        <Allotment.Pane minSize={150}>
                            <div className="panel bottom-middle-panel">
                                <h3>中间下部</h3>
                            </div>
                        </Allotment.Pane>
                    </Allotment>
                </Allotment.Pane>

                <Allotment.Pane minSize={200} preferredSize={200}>
                    <div className="panel right-panel">
                        <h3>右侧信息</h3>
                    </div>
                </Allotment.Pane>
            </Allotment>
        </div>
    );

    // return (
    //     <div id="app">
    //         {/*<EditorLayout></EditorLayout>*/}
    //         <PhaserGame ref={phaserRef} currentActiveScene={currentScene} />
    //         <div>
    //             <div>
    //                 <button className="button" onClick={changeScene}>
    //                     Change Scene
    //                 </button>
    //             </div>
    //             <div>
    //                 <button
    //                     disabled={canMoveSprite}
    //                     className="button"
    //                     onClick={moveSprite}
    //                 >
    //                     Toggle Movement
    //                 </button>
    //             </div>
    //             <div className="spritePosition">
    //                 Sprite Position:
    //                 <pre>{`{\n  x: ${spritePosition.x}\n  y: ${spritePosition.y}\n}`}</pre>
    //             </div>
    //             <div>
    //                 <button className="button" onClick={addSprite}>
    //                     Add New Sprite
    //                 </button>
    //             </div>
    //         </div>
    //     </div>
    // );
}

export default App;
